/* eslint-disable no-undef */
import ajaxFn from './js/ajax.js';
import './css/base.css';
import './css/index.css';
/* eslint-disable no-inner-declarations */
window.addEventListener('load', () => {
  // 等主页中间渲染完再执行初始化函数
  i.then(init);
});
async function init() {
  bannerRender();
  hotPhotoRender();
  hotTagRender();
  await natureRender();
  await cityRender();
  await sportRender();
  await personRender();
  await signRender();
  lazyload();
}

// 初始化主页中间的行元素
const i = new Promise((resolve) => {
  async function initMain() {
    try {
      let res = await ajaxFn({
        baseUrl: 'http://118.89.59.227:7001',
        url: '/api/web/case/getAll',
        method: 'GET',
        data: {
          projectId: 18,
          limit: 66,
        },
        headers: {
          'Content-type': 'application/json; charset=UTF-8',
        },
      });
      // console.log(res);
      let data = res.data.rows;
      // console.log(data);
      let name = [];
      for (let i = 0; i < data.length; i++) {
        // 去除热门航拍点和热门标签
        if (
          data[i].w_classifies[0].name == '热门航拍点' ||
          data[i].w_classifies[0].name == '热门标签'
        ) {
          continue;
        } else {
          name.push(data[i].w_classifies[0].name);
        }
      }

      // 去重
      let newName = name.filter((item, index, arr) => {
        return arr.indexOf(item) === index;
      });
      // console.log(newName);
      if (!newName.length) return;
      for (let i = 0; i < newName.length; i++) {
        mainMiddle.innerHTML += `<div class="main-content">
        <div class="main-content-top">
          <span>${newName[i]}</span>
          <div>
            <div class="dot"></div>
            <a href="#">更多 &gt;</a>
          </div>
        </div>
        <div class="main-item"></div>
      </div>`;
      }
    } catch (error) {
      console.log(error);
    }
  }
  resolve(initMain());
});

// 懒加载
function lazyload() {
  let imgList = document.querySelectorAll('.lazy');
  if (!imgList.length) return;
  // 使用交叉观察函数
  let io = new IntersectionObserver((entries) => {
    // 回调函数
    // console.log(entries);
    // isIntersecting 当前元素是否可见(随着滚动自动更新)
    entries.forEach((item) => {
      if (item.isIntersecting) {
        // 有data-src图片就替换，没有就采用默认的src图片
        item.target.src = item.target.dataset.src || item.target.src;
        item.target.classList.remove('lazy');
        // 把当前图片元素移除观察监听(不需要继续观察，已经显示到页面到了)
        io.unobserve(item.target);
      }
    });
  });
  imgList.forEach((el) => {
    // 开启监听 observe(监听的目标元素)
    io.observe(el);
  });
}

// 全局main中间部分
let mainMiddle = document.querySelector('.main-middle');
// 置顶
let toTop = document.querySelector('.toTop');
let flag = true;

window.addEventListener('scroll', () => {
  if (flag) {
    if (
      document.documentElement.scrollTop >=
      document.documentElement.clientHeight
    ) {
      toTop.classList.add('show');
    } else {
      toTop.classList.remove('show');
      toTop.style.cssText = 'bottom: 25%';
    }
  }
});

// 置顶方法
function moveTop() {
  document.documentElement.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth',
  });
  timer = setInterval(() => {
    clearInterval(timer);
    toTop.classList.remove('show');
    // 重置行内样式
    toTop.style.cssText = 'bottom: 25%';
    flag = true;
    return;
  }, 20);
}

// 置顶点击
toTop.addEventListener('click', () => {
  flag && moveTop();
  flag = false;
});

// 首页轮播图数据
async function bannerRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/carouselGroup/get',
      method: 'GET',
      data: {
        carouselGroupId: 6,
        projectId: 18,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });

    // console.log("res", res);
    let ul = document.querySelector('.img-box>ul');
    let dot = document.querySelector('.dot');
    let banner = document.querySelector('.banner');
    let dotNum = 0;
    let dotLastNum = 0;
    let timer;
    let imgArr = res.data.w_carousels;
    let index = 1;

    // 初始化函数
    function init() {
      let lastImg = `<li><img src=${
        imgArr[imgArr.length - 1].url
      } class="lazy" loading="lazy"></img></li>`;

      ul.innerHTML += lastImg;
      imgArr.forEach((el) => {
        ul.innerHTML += `<li><img src=${el.url} class="lazy" loading="lazy"></img></li>`;
        dot.innerHTML += '<div></div>';
      });
      ul = document.querySelector('.img-box>ul');
      let firstImg = `<li><img src=${imgArr[0].url} class="lazy" loading="lazy"></img></li>`;

      ul.innerHTML += firstImg;
      ul.style.transform = 'translateX(-100%)';
      setTimeout(() => {
        ul.style.transition = 'transform 1s';
      }, 100);
    }
    init();
    let dotArr = dot.querySelectorAll('div');
    dotArr[dotNum].classList.add('active-dot');

    // 下一张函数
    function nextFn() {
      ul.style.transform = `translateX(-${++index}00%)`;
      dotNum++;
      if (dotNum >= dotArr.length) {
        dotNum = 0;
      }
      changeActive();
      // 判断是否到达最后一张, 立马跳到第二张 (等到过度效果结束之后才能跳转)
      if (index > imgArr.length) {
        index = 1;
        // 等待过度效果结束 (transitionend 事件)
        ul.addEventListener(
          'transitionend',
          () => {
            // 关闭过渡效果
            ul.style.transition = 'none';
            // 回到第二张的位置
            ul.style.transform = `translateX(-${index}00%)`;
            // 重置 (更新元素的新样式)
            window.getComputedStyle(ul).transform;

            // 恢复动画
            ul.style.transition = 'transform 1s';
          },
          {
            // 绑定一次事件
            once: true,
          }
        );
      }
    }

    // 小圆点激活函数
    function changeActive() {
      // 小圆点的激活类
      dotArr[dotLastNum].classList.remove('active-dot');
      // 更换激活对象
      dotArr[dotNum].classList.add('active-dot');
      // 更新上一次的值dotLastNum
      dotLastNum = dotNum;
    }

    // 小圆点点击事件
    dotArr.forEach((el, elIndex) => {
      el.addEventListener('click', () => {
        dotNum = elIndex;
        changeActive();
        index = elIndex + 1;
        ul.style.transform = `translateX(-${index}00%)`;
      });
    });

    // 自动播放
    autoPlay();
    function autoPlay() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextFn();
      }, 3000);
    }

    banner.addEventListener('mouseenter', () => {
      clearInterval(timer);
    });

    banner.addEventListener('mouseleave', () => {
      autoPlay();
    });
  } catch (error) {
    console.log(error);
  }
}

// 热门航拍点数据
async function hotPhotoRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        id: 4,
        projectId: 18,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let imgArr = res.data.w_cases;
    // console.log(imgArr);
    let hotPhoto = document.querySelector('.main-hot');
    imgArr.forEach((el) => {
      hotPhoto.innerHTML += `<div class='main-item'><div><img src=${el.cover}></img></div><span>${el.name}</span></div>`;
    });
  } catch (error) {
    console.log(error);
  }
}

// 自然
async function natureRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 16,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let dotNum = 0;
    let dotLastNum = 0;
    mainMiddle = document.querySelector('.main-middle');
    let mainItem = mainMiddle.querySelector(
      '.main-content:first-of-type>.main-item'
    );
    let dot = mainMiddle.querySelector(
      '.main-content:first-of-type>.main-content-top>div>.dot'
    );
    for (let i = 0; i < data.length; i++) {
      let date = new Date(data[i].createdAt);
      let time =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1).toString().padStart(2, '0') +
        '月' +
        date.getDate() +
        '日';
      if (i % 4 == 0) {
        dot.innerHTML += '<div></div>';
      }
      const content = data[i].content.replace(/<p>/g, '').replace(/<\/p>/g, '');
      mainItem.innerHTML += `<div class="main-content-item">
        <div class="img-box"><img src=${data[i].cover}  alt="" class="lazy" loading="lazy" /></div>
        <div class="main-content-info">
          <h4>${data[i].name}</h4>
          <p>设备:<span>${content}</span></p>
          <div>
            <div class="eyes">
              <div></div>
              <span>3</span>
            </div>
            <div class="agree">
              <div></div>
              <span>1</span>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <div class="user">
          <div>
            <div></div>
            <span>be_ mesmerized</span>
          </div>
          <time>${time}</time>
        </div>
      </div>`;
    }

    function dot1() {
      let dotArr = document.querySelectorAll(
        '.main-middle>.main-content:first-of-type>.main-content-top>div>.dot>div'
      );
      dotArr[dotNum].classList.add('active-dot');

      // 小圆点激活函数
      function changeActive() {
        // 小圆点的激活类
        dotArr[dotLastNum].classList.remove('active-dot');
        // 更换激活对象
        dotArr[dotNum].classList.add('active-dot');
        // 更新上一次的值dotLastNum
        dotLastNum = dotNum;
      }

      // 小圆点点击事件
      dotArr.forEach((el, elIndex) => {
        let mainContent = document.querySelectorAll(
          '.main-middle>.main-content:first-of-type>.main-item>.main-content-item'
        );
        let mainContentWidth = Number(mainContent[0].offsetWidth);
        let mainContentMargin = Number(
          window.getComputedStyle(mainContent[0]).marginRight.slice(0, 2)
        );
        el.addEventListener('click', () => {
          dotNum = elIndex;
          changeActive();
          mainContent.forEach((value) => {
            value.style.transform = `translateX(-${
              dotNum *
              (data.length / dotArr.length) *
              (
                (mainContentWidth + mainContentMargin) /
                mainContentWidth
              ).toFixed(2) *
              100
            }%)`;
          });
        });
      });
    }
    dot1();
  } catch (error) {
    console.log(error);
  }
}

// 城市
async function cityRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 34,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let dotNum = 0;
    let dotLastNum = 0;
    mainMiddle = document.querySelector('.main-middle');

    let mainItem = document.querySelector(
      '.main-middle>.main-content:nth-of-type(2)>.main-item'
    );
    let dot = mainMiddle.querySelector(
      '.main-content:nth-of-type(2)>.main-content-top>div>.dot'
    );
    for (let i = 0; i < data.length; i++) {
      let date = new Date(data[i].createdAt);
      let time =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1).toString().padStart(2, '0') +
        '月' +
        date.getDate() +
        '日';
      if (i % 4 == 0) {
        dot.innerHTML += '<div></div>';
      }
      const content = data[i].content.replace(/<p>/g, '').replace(/<\/p>/g, '');
      mainItem.innerHTML += `<div class="main-content-item">
          <div class="img-box"><img src=${data[i].cover}  alt="" class="lazy" loading="lazy" /></div>
          <div class="main-content-info">
            <h4>${data[i].name}</h4>
            <p>设备:<span>${content}</span></p>
            <div>
              <div class="eyes">
                <div></div>
                <span>3</span>
              </div>
              <div class="agree">
                <div></div>
                <span>1</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="user">
            <div>
              <div></div>
              <span>be_ mesmerized</span>
            </div>
            <time>${time}</time>
          </div>
        </div>`;
    }

    function dot2() {
      let dotArr = document.querySelectorAll(
        '.main-middle>.main-content:nth-of-type(2)>.main-content-top>div>.dot>div'
      );
      dotArr[dotNum].classList.add('active-dot');

      // 小圆点激活函数
      function changeActive() {
        // 小圆点的激活类
        dotArr[dotLastNum].classList.remove('active-dot');
        // 更换激活对象
        dotArr[dotNum].classList.add('active-dot');
        // 更新上一次的值dotLastNum
        dotLastNum = dotNum;
      }

      // 小圆点点击事件
      dotArr.forEach((el, elIndex) => {
        let mainContent = document.querySelectorAll(
          '.main-middle>.main-content:nth-of-type(2)>.main-item>.main-content-item'
        );
        let mainContentWidth = Number(mainContent[0].offsetWidth);
        let mainContentMargin = Number(
          window.getComputedStyle(mainContent[0]).marginRight.slice(0, 2)
        );
        el.addEventListener('click', () => {
          dotNum = elIndex;
          changeActive();
          mainContent.forEach((value) => {
            value.style.transform = `translateX(-${
              dotNum *
              (data.length / dotArr.length) *
              (
                (mainContentWidth + mainContentMargin) /
                mainContentWidth
              ).toFixed(2) *
              100
            }%)`;
          });
        });
      });
    }

    dot2();
  } catch (error) {
    console.log(error);
  }
}

// 运动
async function sportRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 42,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let dotNum = 0;
    let dotLastNum = 0;
    mainMiddle = document.querySelector('.main-middle');

    let mainItem = document.querySelector(
      '.main-middle>.main-content:nth-of-type(3)>.main-item'
    );
    let dot = mainMiddle.querySelector(
      '.main-content:nth-of-type(3)>.main-content-top>div>.dot'
    );
    for (let i = 0; i < data.length; i++) {
      // data.forEach((el, index) => {
      let date = new Date(data[i].createdAt);
      let time =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1).toString().padStart(2, '0') +
        '月' +
        date.getDate() +
        '日';
      if (i % 4 == 0) {
        dot.innerHTML += '<div></div>';
      }
      const content = data[i].content.replace(/<p>/g, '').replace(/<\/p>/g, '');
      mainItem.innerHTML += `<div class="main-content-item">
          <div class="img-box"><img src=${data[i].cover}  alt="" class="lazy" loading="lazy" /></div>
          <div class="main-content-info">
            <h4>${data[i].name}</h4>
            <p>设备:<span>${content}</span></p>
            <div>
              <div class="eyes">
                <div></div>
                <span>3</span>
              </div>
              <div class="agree">
                <div></div>
                <span>1</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="user">
            <div>
              <div></div>
              <span>be_ mesmerized</span>
            </div>
            <time>${time}</time>
          </div>
        </div>`;
      // });
    }

    function dot3() {
      let dotArr = document.querySelectorAll(
        '.main-middle>.main-content:nth-of-type(3)>.main-content-top>div>.dot>div'
      );
      dotArr[dotNum].classList.add('active-dot');

      // 小圆点激活函数
      function changeActive() {
        // 小圆点的激活类
        dotArr[dotLastNum].classList.remove('active-dot');
        // 更换激活对象
        dotArr[dotNum].classList.add('active-dot');
        // 更新上一次的值dotLastNum
        dotLastNum = dotNum;
      }

      // 小圆点点击事件
      dotArr.forEach((el, elIndex) => {
        let mainContent = document.querySelectorAll(
          '.main-middle>.main-content:nth-of-type(3)>.main-item>.main-content-item'
        );
        let mainContentWidth = Number(mainContent[0].offsetWidth);
        let mainContentMargin = Number(
          window.getComputedStyle(mainContent[0]).marginRight.slice(0, 2)
        );
        el.addEventListener('click', () => {
          dotNum = elIndex;
          changeActive();
          mainContent.forEach((value) => {
            value.style.transform = `translateX(-${
              dotNum *
              (data.length / dotArr.length) *
              (
                (mainContentWidth + mainContentMargin) /
                mainContentWidth
              ).toFixed(2) *
              100
            }%)`;
          });
        });
      });
    }

    dot3();
  } catch (error) {
    console.log(error);
  }
}

// 人物
async function personRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 43,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let dotNum = 0;
    let dotLastNum = 0;
    mainMiddle = document.querySelector('.main-middle');

    let mainItem = document.querySelector(
      '.main-middle>.main-content:nth-of-type(4)>.main-item'
    );
    let dot = mainMiddle.querySelector(
      '.main-content:nth-of-type(4)>.main-content-top>div>.dot'
    );
    for (let i = 0; i < data.length; i++) {
      // data.forEach((el, index) => {
      let date = new Date(data[i].createdAt);
      let time =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1).toString().padStart(2, '0') +
        '月' +
        date.getDate() +
        '日';
      if (i % 4 == 0) {
        dot.innerHTML += '<div></div>';
      }
      const content = data[i].content.replace(/<p>/g, '').replace(/<\/p>/g, '');
      mainItem.innerHTML += `<div class="main-content-item">
          <div class="img-box"><img src=${data[i].cover}  alt="" class="lazy" loading="lazy" /></div>
          <div class="main-content-info">
            <h4>${data[i].name}</h4>
            <p>设备:<span>${content}</span></p>
            <div>
              <div class="eyes">
                <div></div>
                <span>3</span>
              </div>
              <div class="agree">
                <div></div>
                <span>1</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="user">
            <div>
              <div></div>
              <span>be_ mesmerized</span>
            </div>
            <time>${time}</time>
          </div>
        </div>`;
      // });
    }

    function dot4() {
      let dotArr = document.querySelectorAll(
        '.main-middle>.main-content:nth-of-type(4)>.main-content-top>div>.dot>div'
      );
      dotArr[dotNum].classList.add('active-dot');

      // 小圆点激活函数
      function changeActive() {
        // 小圆点的激活类
        dotArr[dotLastNum].classList.remove('active-dot');
        // 更换激活对象
        dotArr[dotNum].classList.add('active-dot');
        // 更新上一次的值dotLastNum
        dotLastNum = dotNum;
      }

      // 小圆点点击事件
      dotArr.forEach((el, elIndex) => {
        let mainContent = document.querySelectorAll(
          '.main-middle>.main-content:nth-of-type(4)>.main-item>.main-content-item'
        );
        let mainContentWidth = Number(mainContent[0].offsetWidth);
        let mainContentMargin = Number(
          window.getComputedStyle(mainContent[0]).marginRight.slice(0, 2)
        );
        el.addEventListener('click', () => {
          dotNum = elIndex;
          changeActive();
          mainContent.forEach((value) => {
            value.style.transform = `translateX(-${
              dotNum *
              (data.length / dotArr.length) *
              (
                (mainContentWidth + mainContentMargin) /
                mainContentWidth
              ).toFixed(2) *
              100
            }%)`;
          });
        });
      });
    }

    dot4();
  } catch (error) {
    console.log(error);
  }
}

// 签约摄影师
async function signRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 44,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let dotNum = 0;
    let dotLastNum = 0;
    mainMiddle = document.querySelector('.main-middle');

    let mainItem = document.querySelector(
      '.main-middle>.main-content:nth-of-type(5)>.main-item'
    );
    let dot = mainMiddle.querySelector(
      '.main-content:nth-of-type(5)>.main-content-top>div>.dot'
    );
    for (let i = 0; i < data.length; i++) {
      // data.forEach((el, index) => {
      let date = new Date(data[i].createdAt);
      let time =
        date.getFullYear() +
        '年' +
        (date.getMonth() + 1).toString().padStart(2, '0') +
        '月' +
        date.getDate() +
        '日';
      if (i % 4 == 0) {
        dot.innerHTML += '<div></div>';
      }
      const content = data[i].content.replace(/<p>/g, '').replace(/<\/p>/g, '');
      mainItem.innerHTML += `<div class="main-content-item">
          <div class="img-box"><img src=${data[i].cover}  alt="" class="lazy" loading="lazy" /></div>
          <div class="main-content-info">
            <h4>${data[i].name}</h4>
            <p>设备:<span>${content}</span></p>
            <div>
              <div class="eyes">
                <div></div>
                <span>3</span>
              </div>
              <div class="agree">
                <div></div>
                <span>1</span>
              </div>
            </div>
          </div>
          <div class="line"></div>
          <div class="user">
            <div>
              <div></div>
              <span>be_ mesmerized</span>
            </div>
            <time>${time}</time>
          </div>
        </div>`;
    }

    function dot5() {
      let dotArr = document.querySelectorAll(
        '.main-middle>.main-content:nth-of-type(5)>.main-content-top>div>.dot>div'
      );
      dotArr[dotNum].classList.add('active-dot');

      // 小圆点激活函数
      function changeActive() {
        // 小圆点的激活类
        dotArr[dotLastNum].classList.remove('active-dot');
        // 更换激活对象
        dotArr[dotNum].classList.add('active-dot');
        // 更新上一次的值dotLastNum
        dotLastNum = dotNum;
      }

      // 小圆点点击事件
      dotArr.forEach((el, elIndex) => {
        let mainContent = document.querySelectorAll(
          '.main-middle>.main-content:nth-of-type(5)>.main-item>.main-content-item'
        );
        let mainContentWidth = Number(mainContent[0].offsetWidth);
        let mainContentMargin = Number(
          window.getComputedStyle(mainContent[0]).marginRight.slice(0, 2)
        );
        el.addEventListener('click', () => {
          dotNum = elIndex;
          changeActive();
          mainContent.forEach((value) => {
            value.style.transform = `translateX(-${
              dotNum *
              (data.length / dotArr.length) *
              (
                (mainContentWidth + mainContentMargin) /
                mainContentWidth
              ).toFixed(2) *
              100
            }%)`;
          });
        });
      });
    }
    dot5();
  } catch (error) {
    console.log(error);
  }
}

// 热门标签
async function hotTagRender() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 24,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let imgArr = res.data.w_cases;
    let mainItem = document.querySelector(
      '.main-bottom>.main-content>.main-item'
    );
    let dot = document.querySelector(
      '.main-bottom>.main-content>.main-content-top>div>.dot'
    );
    let dotNum = 0;
    let dotLastNum = 0;
    imgArr.forEach((el, index) => {
      if (index % 6 == 0) {
        dot.innerHTML += '<div></div>';
      }
      mainItem.innerHTML += `<div class="main-content-item">
      <img src=${el.cover} class="lazy" loading="lazy" alt="" /><span>${el.name}</span>
    </div>`;
    });
    let dotArr = dot.querySelectorAll('div');
    dotArr[dotNum].classList.add('active-dot');
    let mainContent = mainItem.querySelectorAll('.main-content-item');
    // 小圆点激活函数
    function changeActive() {
      // 小圆点的激活类
      dotArr[dotLastNum].classList.remove('active-dot');
      // 更换激活对象
      dotArr[dotNum].classList.add('active-dot');
      // 更新上一次的值dotLastNum
      dotLastNum = dotNum;
    }

    // 小圆点点击事件
    dotArr.forEach((el, elIndex) => {
      let mainContentWidth = Number(mainContent[0].offsetWidth);
      let mainContentMargin = Number(
        window.getComputedStyle(mainContent[0]).marginRight.slice(0, 2)
      );
      el.addEventListener('click', () => {
        dotNum = elIndex;
        changeActive();
        mainContent.forEach((value) => {
          value.style.transform = `translateX(-${
            dotNum *
            (imgArr.length / dotArr.length) *
            ((
              (mainContentWidth + mainContentMargin) /
              mainContentWidth
            ).toFixed(2) *
              100)
          }%)`;
        });
      });
    });
  } catch (error) {
    console.log(error);
  }
}
